<script type="text/x-template" id="dmp-check-home">
    <el-row>
        <el-col :span="12">
            <el-button type="primary" @click="openWebUrl('/myExtend/homeDmpLogView')">
                跳转主页dmp日志管理
            </el-button>
        </el-col>
        <el-col :span="12">
            <el-card>
                <div slot="header" class="clearfix">
                    <span style="font: bold">主页dmp日志分页查询条件</span>
                </div>
                <pre style="color: #44aa00">{{ tipInfo }}</pre>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="form-card">
                <el-form ref="requestForm" :rules="rules" :model="requestModel">
                    <el-form-item label="业务类型" prop="bizType">
                        <el-select v-model="requestModel.bizType">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="请求头" prop="requestHeader">
                        <el-input
                                type="textarea"
                                v-model="requestModel.requestHeader"
                                :rows="6"
                                placeholder="请输入key:val键值对数据"
                                clearable
                        >
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmit()" style="width: 200px">提交</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="form-card">
                <div slot="header" class="clearfix">
                    <span>返回Json信息</span>
                </div>
                <pre class="json">{{ jsonString }}</pre>
            </el-card>
        </el-col>
    </el-row>
</script>

<script>
    Vue.component('dmp-check-home', {
        template: '#dmp-check-home',
        data() {
            return {
                urls: {
                    //分页数据接口
                    pageList: '/v1/homeDmpLog/pageList.html',
                },
                requestModel: {
                    requestHeader: '',
                    bizType: ''
                },
                bizType:'',
                options: [],
                jsonString: '',
                requestHeader:'',
                rules: {
                    bizType: [
                        {required: true, message: '请选择业务类型'}
                    ],
                    requestHeader: [
                        {required: true, message: '请输入请求头'}
                    ]
                },
            }
        },
        computed: {
            tipInfo(){
                var header = this.convert2KeyValObj(this.requestModel.requestHeader);
                var result = [];
                result.push('业务类型: '+ this.requestModel.bizType);
                result.push('MAC地址: '+ this.getAvoidNullStringVal(header, 'MAC'));
                result.push('设备唯一标识ID: '+ this.getAvoidNullStringVal(header, 'cUDID'));
                return result.join("\n")
            }
        },
        methods: {
            loadBizTypeOptions() {
                this.options=[
                    {label : '板块',value:'Panel'},
                    {label : '版面',value:'Tab'},
                    {label : '普通推荐位',value:'Block'},
                    {label : '轮播推荐位',value:'Container'},
                    {label : '系统功能',value:'Plugin'},
                    {label : '状态栏',value:'VipBar'},
                    {label : '版面强插',value:'TabForceInsert'},
                    {label : '参数下发',value:'OpsParams'},
                    {label : '首页方案',value:'HomePage'}
                ]
            },
            resetForm: function () {
                //重置按钮
                this.$refs.requestForm.resetFields();
            },
            handleSubmit: function () {
                this.$refs.requestForm.validate(function (valid) {
                    if (valid) {
                        var header = this.convert2KeyValObj(this.requestModel.requestHeader);
                        if (!header.MAC){
                            this.$message('请求头的MAC参数值不能为空');
                        }
                        else if (!header.cUDID){
                            this.$message('请求头的cUDID参数值不能为空');
                        }else {
                            this.mockData(header)
                        }
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            mockData(header) {
                var searchParams = {};
                searchParams.bizType = this.requestModel.bizType;
                searchParams.mac = header.MAC ? header.MAC : '';
                searchParams.did = header.cUDID ? header.cUDID : '';
                searchParams.page = 1;
                searchParams.rows = 10;
                this.ajax(this.urls.pageList, searchParams
                        , function (result) {
                            if (result.code === '0') {
                                 this.jsonString = JSON.stringify(result, null, 2);
                            } else {
                                this.$message(result.msg);
                            }
                        }.bind(this));
            }
        },
        watch: {
        },
        mounted() {
            this.loadBizTypeOptions();
        },
        created() {
        }
    })
</script>
<style scoped>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .json {
        text-align: left;
    }
    .form-card {
        text-align: left;
        vertical-align: middle;
        width: 100%;
    }
</style>
